@charset "utf-8";

@import "common/reset";

@function r($px) {
  @return $px / 100 * 1rem;
}

$color: #ff9344;

section {
    
  .lunbo_box {
    height: r(188);
    overflow: hidden;

    .lunbotu {
      width: 100%;
      overflow-x: auto;
      height: r(228);

      ul {
        height: r(188);
        width: 450%;
        background-color: white;
        text-align: center;
        padding-left: r(18);
        transition: all 0.5s;

        li {
          width: r(150);
          margin-right: r(36);

          p:nth-of-type(1) {
            width: r(150);
            height: r(150);
            overflow: hidden;

            img {
              width: 100%;
            }
          }

          p {
            font-size: r(32);
          }
        }
      }
    }
  }

  #food:checked ~ .lunbo_box .lunbotu ul {
    margin-left: 0%;
  }

  #movie:checked ~ .lunbo_box .lunbotu ul {
    margin-left: -100%;
  }

  #sport:checked ~ .lunbo_box .lunbotu ul {
    margin-left: -200%;
  }

  #sing:checked ~ .lunbo_box .lunbotu ul {
    margin-left: -300%;
  }

  #food:checked ~ .control label .yuan1 {
    color: $color;
  }

  #movie:checked ~ .control label .yuan2 {
    color: $color;
  }

  #sport:checked ~ .control label .yuan3 {
    color: $color;
  }

  #sing:checked ~ .control label .yuan4 {
    color: $color;
  }

  .control {
    text-align: center;
    margin-top: r(16);
    width: 50%;
    position: absolute;
    left: 40%;
    top: r(121);
    transform: translateX(-40%);

    .ct_yuan {
      color: #ffc9a1;
    }
  }

  .banner {
    margin-top: r(50);

    .type_icon {
      color: black;
    }
  }

  .type_img {
    margin-top: r(36);

    div {
      width: r(132);
      height: r(132);
      margin: 0 r(24);

      img {
        width: 100%;
      }
    }
  }
}
